<template>
	<view style="height: 100vh;">
		<view class="logo">
			<p>全网资源搜索</p>
		</view>
		<view class="search">
			<u-icon name="search" color="#2979ff" size="28"></u-icon>
			<input style="flex: 1;" placeholder="输入关键词搜索" @blur="search" type="text" />
		</view>
		<view class="keyword">
			<p style="display: flex;justify-content: space-between;align-items: center;">
				<span>大家都在搜</span>
				<u-icon @click="ChangeBatch()" name="reload" label="换一批" color="#606266" size="20"
					labelSize="12"></u-icon>
			</p>
			<ul>
				<li @click="goPage('pansearch','?val='+item.name)" :key="index" v-for="(item,index) in keyWords">
					{{item.name}}
				</li>
			</ul>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [],
				keyWords: []
			}
		},
		methods: {
			search(e) {
				if (e.detail.value == '') {
					return
				}
				this.goPage('pansearch', '?val=' + e.detail.value)
			},
			ChangeBatch() {
				this.tabs.sort(() => Math.random() - 0.5);
				let temp = this.tabs.slice()
				this.keyWords = temp.splice(0, 20)
			},
			getTabList() {
				let that = this
				uni.request({
					url: `https://api.hunhepan.com/v1/extab/list_all`,
					method: "GET",
					success(res) {
						that.tabs = res.data.data
						that.tabs.sort(() => Math.random() - 0.5);
						let temp = that.tabs.slice()
						that.keyWords = temp.splice(0, 20)
					}
				})
			},
		},
		mounted() {
			this.getTabList()
		}
	}
</script>

<style scoped lang="scss">
	ul {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		gap: 10px;
	}

	li {
		list-style: none;
		background-color: #f0f0f0;
		border-radius: 50px;
		color: #606266;
		font-size: 12px;
		padding: 5px 10px;
	}

	.keyword {
		margin: 20px;
		font-size: 14px;
		position: relative;
		top: calc(100px + var(--status-bar-height));
	}

	.search {
		display: flex;
		align-items: center;
		position: relative;
		top: calc(100px + var(--status-bar-height));
		padding: 12px;
		margin: 20px;
		border-radius: 25px;
		background-color:white;
	}

	.logo {
		position: relative;
		top: calc(100px + var(--status-bar-height));
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		p {
			margin-top: 10px;
			font-size: 28px;
			font-weight: 800;
		}
	}
</style>